/* 
专辑页面
1 轮播图
2 列表
*/

<template>
  <scroll-view class="album_scroll_view" scroll-y @scrolltolower="handleToLower">
    <!-- 轮播图 开始 -->
    <view class="album_swiper">
      <swiper indicator-dots autoplay circular>
        <swiper-item v-for="item in banner" :key="item.id">
          <image :src="item.thumb" />
        </swiper-item>
      </swiper>
    </view>
    <!-- 轮播图 结束 -->

    <!-- 列表 开始 -->
    <view class="album_list">
      <navigator
        class="album_item"
        v-for="item in album"
        :key="item.id"
        :url="`/pages/album/index?id=${item.id}`"
      >
        <view class="album_img">
          <image mode="aspectFill" :src="item.cover" />
        </view>
        <view class="album_info">
          <view class="album_name">{{ item.name }}</view>
          <view class="album_desc">{{ item.desc }}</view>
          <view class="album_btn">
            <view class="album_attention"> + 关注 </view>
          </view>
        </view>
      </navigator>
    </view>
    <!-- 列表 结束 -->
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图
      banner: [],
      // 列表
      album: [],
      // 请求参数
      params: {
        limit: 30,
        order: 'new',
        skip: 0
      },
      // 是否还有下一页数据
      hasMore: true
    };
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: '专辑'
    });

    this.getAlbumList();
  },
  methods: {
    // 获取接口的数据
    getAlbumList() {
      this.request({
        url: 'http://157.122.54.189:9088/image/v1/wallpaper/album',
        data: this.params
      }).then((result) => {
        // 第一次发送请求
        if (this.banner.length === 0) {
          this.banner = result.res.banner;
        }

        // 没有下一页数据
        if (result.res.album.length === 0) {
          this.hasMore = false;
          uni.showToast({
            title: '没有数据了',
            icon: 'none'
          });
          return false;
        }

        this.album = [...this.album, ...result.res.album];
      });
    },
    // 上拉加载-执行分页
    handleToLower() {
      if (this.hasMore) {
        /* 
				1 修改参数
				2 发起请求
				3 请求成功
				*/
        this.params.skip += this.params.limit;
        this.getAlbumList();
      } else {
        uni.showToast({
          title: '没有数据了',
          icon: 'none'
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
// 滚动视图
.album_scroll_view {
  height: calc(100vh - 36px);
}

// 轮播图
.album_swiper {
  /*   
  image : 640px * 284px
  640px / 284px = 750rpx / x
  x = 750 * 284 / 640 rpx 
  */
  swiper {
    height: calc(750rpx * 284 / 640);
    image {
      height: 100%;
    }
  }
}

// 列表
.album_list {
  padding: 10rpx;
  .album_item {
    display: flex;
    padding: 10rpx 0;
    border-bottom: 1rpx solid #ccc;
    &:last-child {
      border-bottom: none;
    }
    .album_img {
      flex: 1;
      padding: 10rpx;
      image {
        width: 200rpx;
        height: 200rpx;
      }
    }
    .album_info {
      flex: 2;
      padding: 0 10rpx;
      overflow: hidden;
      .album_name {
        padding: 10rpx 0;
        font-size: 30rpx;
        color: #000;
      }
      .album_desc {
        padding: 10rpx 0;
        font-size: 24rpx;
        // 溢出的文字省略号显示
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .album_btn {
        display: flex;
        justify-content: flex-end;
        padding: 10rpx;
        .album_attention {
          border: 1px solid $color;
          color: $color;
        }
      }
    }
  }
}
</style>